<template>
  <view class="flex-col page">
    <view class="flex-col flex-auto group">
      <view class="flex-row items-center section_3 space-x-31">
        <view class="flex-row items-center flex-auto section_4 space-x-13">
          <image
            class="image_6"
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65275effce83440011a297df/16971112898739308667.png"
          />
          <text class="text_5">搜索...</text>
        </view>
        <text class="text_4">搜索</text>
      </view>
      <view class="flex-col section_5">
        <text class="self-start font_2 text_6">热门搜索</text>
        <view class="flex-row group_2">
          <view class="flex-col justify-start items-center button"><text class="font_3">到店按摩</text></view>
          <view class="flex-col justify-start items-center button_2 text-wrapper">
            <text class="font_3">到店养生按摩</text>
          </view>
          <view class="flex-col justify-start items-center button_2 button_3"><text class="font_3">老人</text></view>
        </view>
        <view class="flex-row group_3 space-x-29">
          <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_3">婴幼儿按摩</text></view>
          <view class="flex-col justify-start items-center button"><text class="font_3">美容养颜</text></view>
        </view>
        <view class="flex-row group_4">
          <view class="flex-col justify-start items-center button_4"><text class="font_3">中医养生按摩店</text></view>
          <view class="flex-col justify-start items-center button_2 button_3"><text class="font_3">儿童</text></view>
          <view class="flex-col justify-start items-center button_2 text-wrapper_2">
            <text class="font_3">中老年按摩</text>
          </view>
        </view>
      </view>
      <view class="flex-col section_6 space-y-5">
        <text class="self-start font_2 text_7">搜索历史</text>
        <view class="flex-col">
          <view class="flex-row group_5 list-item space-x-12" v-for="(item, index) in items" :key="index">
            <image
              class="image_7"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65275effce83440011a297df/16971112895388932995.png"
            />
            <text class="font_4">中老年按摩</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        items: [null, null, null],
      };
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #f8f8f8;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-bottom: 662rpx;
      overflow-y: auto;
      .section_3 {
        padding: 25rpx 28rpx;
        background-color: #ffffff;
        .section_4 {
          padding: 20rpx 30rpx;
          background-color: #f5f5f5;
          border-radius: 34rpx;
          height: 68rpx;
          .image_6 {
            width: 28rpx;
            height: 28rpx;
          }
          .text_5 {
            color: #999999;
            font-size: 26rpx;
            font-family: PingFangHeiTC;
            line-height: 25rpx;
          }
        }
        .space-x-13 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 13rpx;
          }
        }
        .text_4 {
          color: #74b72e;
          font-size: 30rpx;
          font-family: PingFangSC;
          line-height: 29rpx;
        }
      }
      .space-x-31 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 31rpx;
        }
      }
      .section_5 {
        padding: 29rpx 28rpx;
        background-color: #ffffff;
        .text_6 {
          margin-left: 4rpx;
        }
        .group_2 {
          margin-top: 29rpx;
          .text-wrapper {
            padding: 16rpx 0;
            background-color: #f5f5f5;
            border-radius: 29rpx;
            width: 220rpx;
            height: 58rpx;
            border: solid 1rpx #f5f5f5;
          }
        }
        .group_3 {
          margin-top: 24rpx;
          padding: 0 3rpx;
        }
        .space-x-29 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 29rpx;
          }
        }
        .font_3 {
          font-size: 26rpx;
          font-family: PingFang SC;
          line-height: 25rpx;
          color: #333333;
        }
        .button {
          padding: 16rpx 0;
          background-color: #f5f5f5;
          border-radius: 29rpx;
          width: 168rpx;
          height: 58rpx;
          border: solid 1rpx #f5f5f5;
        }
        .group_4 {
          margin-top: 22rpx;
          padding: 0 2rpx;
          .button_4 {
            padding: 16rpx 0;
            background-color: #f5f5f5;
            border-radius: 29rpx;
            width: 252rpx;
            height: 58rpx;
            border: solid 1rpx #f5f5f5;
          }
        }
        .button_2 {
          margin-left: 28rpx;
        }
        .button_3 {
          padding: 16rpx 0;
          background-color: #f5f5f5;
          border-radius: 29rpx;
          width: 116rpx;
          height: 58rpx;
          border: solid 1rpx #f5f5f5;
        }
        .text-wrapper_2 {
          padding: 16rpx 0;
          background-color: #f5f5f5;
          border-radius: 29rpx;
          width: 196rpx;
          height: 58rpx;
          border: solid 1rpx #f5f5f5;
        }
      }
      .section_6 {
        padding: 33rpx 28rpx 4rpx;
        background-color: #ffffff;
        .text_7 {
          line-height: 28rpx;
        }
        .group_5 {
          padding: 35rpx 0 26rpx;
          .image_7 {
            width: 26rpx;
            height: 26rpx;
          }
          .font_4 {
            font-size: 26rpx;
            font-family: PingFang SC;
            line-height: 25rpx;
            color: #656565;
          }
        }
        .list-item {
          &:not(:last-of-type) {
            border-bottom: solid 1rpx #ededed;
          }
        }
        .space-x-12 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 12rpx;
          }
        }
      }
      .space-y-5 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 5rpx;
        }
      }
      .font_2 {
        font-size: 30rpx;
        font-family: PingFang SC;
        line-height: 29rpx;
        color: #323232;
      }
    }
  }
</style>